import './index.scss';
import React, { useEffect, useState } from "react";
// import baoshi from '@/assets/icons/baoshi.png';
import Logo from '@/assets/photos/LogoLogin.png'
import txtLogin from '@/assets/photos/txtLogin.png'
import { send_verify_code, user_register } from '@/utils/mixin.ts'
import { Button, Checkbox, Form, Input, message } from 'antd';
import { useNavigate } from 'react-router-dom';
const Login = () => {
    // const [trade, setTrade] = useState(null); 
    // const [reward, setReward] = useState(null)
    // useEffect 第二个参数为空数组表示仅在组件挂载时执行
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [code, setCode] = useState('');
    const [isSending, setIsSending] = useState(false); // 控制按钮是否处于发送中状态
    const [countdown, setCountdown] = useState(60); // 倒计时秒数
    const navigate = useNavigate()
    useEffect(() => {
        // 这里是 componentDidMount 的逻辑
        // console.log("Component is mounted");
        // const res = get_platform_trade({currency: 'BNB'})
        
        // 如果有清理逻辑，例如清理定时器，可以在这里添加
        // return () => {
        //   console.log("Component will unmount");
        //   // 清理逻辑
        // };
        

      }, []);  // 空数组表示只在组件挂载时执行

      const send = async () => {
        if(!username) {
            return message.error('Please input the Email!');
        }
        try {
            const res = await send_verify_code({ email: username });
            if(res.code == -1) {
                return message.error(res.msg);
            }
            // 设置按钮状态
            setIsSending(true);

            // 开始倒计时
            const timer = setInterval(() => {
                setCountdown((prevCountdown) => {
                if (prevCountdown === 1) {
                    clearInterval(timer);
                    setIsSending(false); // 倒计时结束后恢复按钮状态
                    return 60; // 重置倒计时
                }
                return prevCountdown - 1;
                });
            }, 1000);
        } catch (error) {
            console.error("Error fetching data:", error);
        }
    };

    const signup = async () => {
        try {
            const res = await user_register({ email: username, password, code });
            if(res.code == -1) {
                return message.error(res.msg);
            }
            message.success('Registration Successful');
            navigate('/login')
        } catch (error) {
            console.error("Error fetching data:", error);
        }
    };

      const onFinish = (values) => {
        console.log('Success11:', values);
        signup()
      };
      
      const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
      };

      const handleUsernameChange = (e) => {
        setUsername(e.target.value);
      };
    
      const handlePasswordChange = (e) => {
        setPassword(e.target.value);
      };

      const handleCodeChange = (e) => {
        setCode(e.target.value);
      };

      const Signin = () => {
        navigate('/login')
    }
    
    return (
        <div className='login signup'>
            <div className='main-login'>
                <div className='logo'>
                      <img src={Logo} />
                      <img src={txtLogin} />
                </div>
                <p>Embrace the Future of Trading!</p>
                <div className='Signup'>Sign up</div>
                <div className='form'>
                <Form
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 600 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <div className='send-div'>
                    <Form.Item
                        name="username"
                        className='captcha'
                        rules={[
                            {
                            required: true,
                            message: 'Please input the Email!',
                            },
                        ]}
                        >
                        <Input placeholder='Email' value={username} onChange={handleUsernameChange}  />
                        
                 </Form.Item>
                    <Button value={username} onClick={() => {send()}} disabled={isSending}>
                         {isSending ? `${countdown}s` : 'Send'}
                        </Button>
                    </div>
                   
                        
                   
                    <Form.Item
                    label=""
                    name="password"
                    className='pwd'
                    rules={[{ required: true, message: 'Please input your password!' }]}
                    >
                    <Input.Password placeholder='Password' value={password} onChange={handlePasswordChange}  />
                    </Form.Item>

                    <Form.Item
                    label=""
                    name="code"
                    className='user'
                    rules={[{ required: true, message: 'Please input verification code!' }]}
                    >
                    <Input placeholder='Email verification code' value={code} onChange={handleCodeChange}  />
                    </Form.Item>
                    <div className='info'> <span>*</span> Please check your mail box and get the verification code, submit it with your password.</div>
                    <Form.Item >
                        <Button type="primary" htmlType="submit">
                            Submit
                        </Button>
                    </Form.Item>
                </Form>
                <div className='in'>
                    <p>Have an account?</p><span onClick={() => {Signin()}}> Sign in</span>
                </div>
                <span className='data'>
                      Data is encrypted and Protected
                </span>
                {/* <div className='up'>
                    <p>Don't have an account?</p><span> Sign up</span>
                </div> */}
                </div>
            </div>
        </div>
    );
};

export default Login;
